import React, { useState, useMemo } from 'react';
import { Popover, Popconfirm } from 'antd';
import CommonTag from "@/components/CommonTag";
import SupplementUserCode from './SupplementUserCode';
import SetDouyinTypeModal from './SetDouyinTypeModal';
import ExpressEarlyWarning from './ExpressEarlyWarning';
import TableRender from '@/components/TableRender';

//三方面单table
const OtherTableList = ({ type, data = [], pages, setPages, selectedRowKeys, headerHeight, updateFunc, deleteOperator, handleSelectRowKey, refreshTableList }) => {

  const [record, setRecord] = useState({});

  //基础大众列
  const baseColumns = [
    {
      name: "序号",
      code: "index",
      width: 60,
      render: (t, r, i) => i + 1
    },
    {
      name: "网店名称",
      code: "ecstoreName",
      width: 120,
    },
    {
      name: "快递公司",
      code: "expressName",
      width: 120,
      render: (text, { isUpDoor }) => (<>
        <div>{text}</div>
        {Boolean(isUpDoor) && <CommonTag type='jdHomeDs' />}
      </>)
    },
    {
      name: "快递类型",
      code: "joinType",
      width: 120,
    },
    {
      name: "快递网点名称",
      code: "networkName",
      width: 150,
    },
    {
      name: "发货地址",
      code: "detail",
      width: 150,
      render: (text, record) => {
        const { senderName = '', senderMobile = '', province = '', city = '', area = '', detail } = record;
        const content = type == '4' ? `${detail}` : `${province} ${city} ${area} ${detail}`;
        return <>
          <p>联系人：{senderName ? senderName : '-'}</p>
          <p>电话：{senderMobile ? senderMobile : '-'}</p>
          <p className="textOverflowMultiTwo">地址：<Popover content={<div className='custom-ant-popver-content'>{content}</div>}>{content}</Popover></p>
        </>
      }
    }
  ]

  //jd 特殊列
  const jdSpecialColumn = [
    {
      name: "青龙编码",
      code: "extend",
      width: 120,
    },
  ]

  //固定展示列
  const fixedShowColumn = [
    {
      name: "剩余单号",
      code: "subNum",
      lock: true,
      width: 120,
      render: (text, { joinType }) => {
        if (type == '28') {
          return <span className="common-color1">{text}</span>
        } else {
          if (joinType.includes('直营') || text == '-1') {
            return '无限'
          } else {
            return <span className="common-color1">{text}</span>
          }
        }
      }
    }
  ];

  //判断处理column
  const judgeRenderColumnsFunc = useMemo(() => {
    if (['1', '2', '4', '15', '25', '26', '40'].includes(type)) {
      return [...baseColumns, ...fixedShowColumn, {
        name: "操作",
        code: "operator",
        width: 120,
        lock: true,
        render: (text, record) => {
          if (/^\u987a\u4e30\u901f\u8fd0/.test(record.expressName)) {
            return <span className="opera-span-common"><span onClick={() => setRecord({ ...record, visible: 'sftype' })}>补充业务类型</span></span>
          } else if (!record.joinType.includes('直营') && text != '-1') {
            return <span className="opera-span-common"><span onClick={() => setRecord({ ...record, visible: 'earlyWarning' })}>单号预警</span></span>
          } else {
            return '无'
          }
        }
      }]
    } else if (type == '8') {
      return [...baseColumns, {
        name: "操作",
        code: "operator",
        width: 120,
        lock: true,
        render: (text, record) => {
          if (/^\u987a\u4e30\u901f\u8fd0/.test(record.expressName)) {
            return <span className="opera-span-common"><span onClick={() => setRecord({ ...record, visible: 'sftype' })}>补充业务类型</span></span>
          } else {
            return '无'
          }
        }
      }]
    } else if (type == '3') {
      return [...baseColumns, ...jdSpecialColumn, ...fixedShowColumn]
    } else if (type == '14') {
      return [...baseColumns, ...fixedShowColumn, {
        name: "操作",
        code: "operator",
        width: 100,
        lock: true,
        render: (text, record) => {
          if (record.joinType.includes('直营')) {
            return <span className="opera-span-common"><span onClick={() => setRecord({ ...record, visible: 'suplyUserCode' })}>补充客户编码</span></span>
          } else if (!record.joinType.includes('直营') && text != '-1') {
            return <span className="opera-span-common"><span onClick={() => setRecord({ ...record, visible: 'earlyWarning' })}>单号预警</span></span>
          } else {
            return '无'
          }
        }
      }]
    } else if (type == '5' || type == '28') {
      return [
        {
          name: "序号",
          code: "index",
          width: 60,
          render: (t, r, i) => i + 1
        },
        {
          name: "快递公司",
          code: "expressName",
          width: 150,
        },
        {
          name: "授权信息",
          code: "extend",
          width: 150,
          render: (text) => {
            const { monthlyCard, partnerId, checkWord, customerCode, remark } = JSON.parse(text);
            if (type == 28) {
              return (
                <p className='textOverflowMultiOne'>客户编码：<Popover content={customerCode}><span>{customerCode}</span></Popover></p>
              )
            } else {
              return (
                <>
                  <p>月结号：{monthlyCard}</p>
                  <p className='textOverflowMultiOne'>顾客编码：<Popover content={checkWord}><span>{partnerId}</span></Popover></p>
                  <p className='textOverflowMultiTwo'>校验码：<Popover content={checkWord}><span >{checkWord}</span></Popover></p>
                  <p className='textOverflowMultiTwo'>时效产品：<Popover content={checkWord}><span >{remark}</span></Popover></p>
                </>
              )
            }
          }
        },
        {
          name: "快递网点名称",
          code: "networkName",
          width: 150,
        },
        {
          name: "发货地址",
          code: "detail",
          width: 150,
          render: (text, record) => {
            const { senderName = '', senderMobile = '', province = '', city = '', area = '', detail } = record;
            const content = `${province} ${city} ${area} ${detail}`
            return <>
              <p>联系人：{senderName ? senderName : '-'}</p>
              <p>电话：{senderMobile ? senderMobile : '-'}</p>
              <p className="textOverflowMultiTwo">地址：<Popover content={<div className='custom-ant-popver-content'>{content}</div>}>{content}</Popover></p>
            </>
          }
        },
        ...fixedShowColumn,
        {
          name: "操作",
          code: "operator",
          width: 160,
          lock: true,
          render: (text, record) => (
            <span className="opera-span-common">
              <span onClick={() => updateFunc(record.id, record)}>编辑</span>

              <i>|</i>
              <Popconfirm
                title="确定要删除吗?"
                onConfirm={() => deleteOperator(record.id)}
                okText="确定"
                cancelText="取消"
              >
                <span>删除</span>
              </Popconfirm>
              {
                (!record.joinType.includes('直营') && text != '-1') ?
                  <>
                    <i>|</i>
                    <span className="opera-span-common"><span onClick={() => setRecord({ ...record, visible: 'earlyWarning' })}>单号预警</span></span>
                  </> : ''
              }
              {
                (type == '28' && (record.subNum || record.subNum == 0)) ?
                  <>
                    <i>|</i>
                    <span className="opera-span-common"><span onClick={() => setRecord({ ...record, visible: 'earlyWarning' })}>单号预警</span></span>
                  </> : ''
              }
            </span>
          )
        }
      ]
    }
  })

  //表格组件
  const TableRenderProps = {
    data,
    rowKey: 'id',
    columns: judgeRenderColumnsFunc,
    style: {
      height: `calc(100vh - ${headerHeight + 270}px)`
    },
    radioOption: type == '28' ? {
      value: selectedRowKeys,
      onChange: (selectedRowKeys) => {
        handleSelectRowKey(selectedRowKeys)
      },
    } : null,
    pageConfig: {
      pages,
      handlePageSize(page, size) {
        setPages({
          ...pages,
          current: page,
          pageSize: size
        });
      }
    }
  }

  const conmonModalProps = {
    record,
    handleOk() {
      refreshTableList();
    },
    handleCancel() {
      setRecord({});
    }
  }

  return <>
    <TableRender {...TableRenderProps} />
    {record.visible == 'suplyUserCode' && <SupplementUserCode {...conmonModalProps} />}
    {record.visible == 'sftype' && <SetDouyinTypeModal {...conmonModalProps} />}
    {record.visible == 'earlyWarning' && <ExpressEarlyWarning {...conmonModalProps} />}
  </>;
};

export default OtherTableList;